{% extends 'base.html' %}

{% block title %}推送关键词管理 - 资讯聚合平台{% endblock %}

{% block page_title %}推送关键词管理{% endblock %}

{% block page_actions %}
<button class="btn" id="add-keyword-btn">
    <i class="fas fa-plus"></i> 添加关键词
</button>
{% endblock %}

{% block content %}
<div class="keyword-list">
    {% if keywords %}
        <div class="keyword-cards">
            {% for keyword in keywords %}
                <div class="keyword-card">
                    <div class="keyword-header">
                        <h3>{{ keyword.keyword }}</h3>
                        <div class="keyword-actions">
                            <button class="edit-btn" data-id="{{ keyword.id }}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="delete-btn" data-id="{{ keyword.id }}">
                                <i class="fas fa-trash"></i>
                            </button>
                            <button class="history-btn" data-id="{{ keyword.id }}" title="查看历史">
                                <i class="fas fa-history"></i>
                            </button>
                        </div>
                    </div>
                    <div class="keyword-body">
                        <div class="keyword-item">
                            <span class="label">描述:</span>
                            <span class="value">{{ keyword.description|default:"无描述"|truncatechars:100 }}</span>
                        </div>
                        <div class="keyword-item">
                            <span class="label">手动输入文本:</span>
                            <span class="value">{{ keyword.manual_text|default:"无"|truncatechars:100 }}</span>
                        </div>
                        <div class="keyword-item">
                            <span class="label">创建时间:</span>
                            <span class="value">{{ keyword.created_at|date:"Y-m-d H:i" }}</span>
                        </div>
                        <div class="keyword-item">
                            <span class="label">更新时间:</span>
                            <span class="value">{{ keyword.updated_at|date:"Y-m-d H:i" }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <i class="fas fa-key fa-3x"></i>
            <p>暂无推送关键词</p>
            <p class="hint">点击右上角"添加关键词"按钮创建新关键词</p>
        </div>
    {% endif %}
</div>

<!-- 添加/编辑关键词模态框 -->
<div class="modal" id="keyword-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">添加推送关键词</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="keyword-form" method="post">
                {% csrf_token %}
                <input type="hidden" name="keyword_id" id="keyword_id">
                <div class="form-group">
                    <label for="keyword">关键词</label>
                    <input type="text" id="keyword" name="keyword" required>
                </div>
                <div class="form-group">
                    <label for="description">描述</label>
                    <textarea id="description" name="description" rows="4"></textarea>
                </div>
                <div class="form-group">
                    <label for="manual_text">手动输入文本</label>
                    <textarea id="manual_text" name="manual_text" rows="6" placeholder="在此输入您希望提交给大模型的文本，如果留空则使用关键词进行处理"></textarea>
                </div>
                <div class="form-group">
                    <label for="schedule">执行时间周期</label>
                    <select id="schedule" name="schedule">
                        <option value="daily">每天</option>
                        <option value="weekly" selected>每周</option>
                        <option value="monthly">每月</option>
                    </select>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 历史记录模态框 -->
<div class="modal" id="history-modal">
    <div class="modal-content modal-lg">
        <div class="modal-header">
            <h3>历史记录</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <div class="history-list">
                <!-- 历史记录将通过AJAX加载 -->
                <div class="loading">
                    <i class="fas fa-spinner fa-spin"></i> 加载中...
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal" id="delete-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <p>确定要删除此关键词吗？此操作不可撤销。</p>
            <div class="form-actions">
                <button type="button" class="btn-cancel">取消</button>
                <button type="button" class="btn-delete">删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .keyword-list {
        margin-top: 20px;
    }
    
    .keyword-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .keyword-card {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .keyword-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .keyword-header {
        background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .keyword-header h3 {
        margin: 0;
        font-size: 1.2em;
    }
    
    .keyword-actions {
        display: flex;
        gap: 10px;
    }
    
    .keyword-actions button {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .keyword-actions button:hover {
        background: rgba(255, 255, 255, 0.4);
    }
    
    .keyword-body {
        padding: 15px;
    }
    
    .keyword-item {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
    }
    
    .keyword-item .label {
        font-size: 0.9em;
        color: #7a938b;
        margin-bottom: 5px;
    }
    
    .keyword-item .value {
        font-weight: 500;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 0;
        color: #7a938b;
    }
    
    .empty-state i {
        margin-bottom: 20px;
        opacity: 0.5;
    }
    
    .empty-state .hint {
        font-size: 0.9em;
        opacity: 0.7;
        margin-top: 10px;
    }
    
    /* 模态框样式 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    
    .modal-content {
        background: white;
        border-radius: 15px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: modal-in 0.3s ease-out;
    }
    
    .modal-content.modal-lg {
        max-width: 700px;
    }
    
    @keyframes modal-in {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-header h3 {
        margin: 0;
        color: var(--dark-gray);
    }
    
    .close-btn {
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
        color: #7a938b;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: var(--dark-gray);
        font-weight: 500;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        font-size: 1em;
        transition: border-color 0.3s;
    }
    
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        border-color: var(--primary-green);
        outline: none;
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn-cancel {
        background: #f1f1f1;
        color: var(--dark-gray);
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.3s;
    }
    
    .btn-cancel:hover {
        background: #e5e5e5;
    }
    
    .btn-submit {
        background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 500;
        transition: transform 0.3s;
    }
    
    .btn-submit:hover {
        transform: translateY(-2px);
    }
    
    .btn-delete {
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 500;
    }
    
    /* 历史记录样式 */
    .history-list {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .history-item {
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .history-item:last-child {
        border-bottom: none;
    }
    
    .history-item.success {
        border-left: 4px solid var(--primary-green);
    }
    
    .history-item.failed {
        border-left: 4px solid #ff6b6b;
    }
    
    .history-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .history-status {
        font-weight: 500;
    }
    
    .history-status.success {
        color: var(--primary-green);
    }
    
    .history-status.failed {
        color: #ff6b6b;
    }
    
    .history-time {
        color: #7a938b;
        font-size: 0.9em;
    }
    
    .history-message {
        background: rgba(0, 0, 0, 0.03);
        padding: 10px;
        border-radius: 5px;
        font-size: 0.9em;
        white-space: pre-wrap;
    }
    
    .loading {
        text-align: center;
        padding: 20px;
        color: #7a938b;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const keywordModal = document.getElementById('keyword-modal');
        const historyModal = document.getElementById('history-modal');
        const deleteModal = document.getElementById('delete-modal');
        const addKeywordBtn = document.getElementById('add-keyword-btn');
        const closeBtns = document.querySelectorAll('.close-btn');
        const cancelBtns = document.querySelectorAll('.btn-cancel');
        const keywordForm = document.getElementById('keyword-form');
        const editBtns = document.querySelectorAll('.edit-btn');
        const deleteBtns = document.querySelectorAll('.delete-btn');
        const historyBtns = document.querySelectorAll('.history-btn');
        const deleteBtn = document.querySelector('.btn-delete');
        
        let currentDeleteId = null;
        
        // 打开添加关键词模态框
        addKeywordBtn.addEventListener('click', function() {
            document.getElementById('modal-title').textContent = '添加推送关键词';
            document.getElementById('keyword_id').value = '';
            keywordForm.reset();
            document.getElementById('manual_text').value = ''; // 清空手动输入文本
            keywordModal.style.display = 'flex';
        });
        
        // 关闭模态框
        closeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                keywordModal.style.display = 'none';
                historyModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        cancelBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                keywordModal.style.display = 'none';
                historyModal.style.display = 'none';
                deleteModal.style.display = 'none';
            });
        });
        
        // 点击编辑按钮
        editBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const keywordId = this.getAttribute('data-id');
                // 这里应该发送AJAX请求获取关键词详情，然后填充表单
                // 为了演示，我们假设已经获取到数据
                document.getElementById('modal-title').textContent = '编辑推送关键词';
                document.getElementById('keyword_id').value = keywordId;
                // 填充表单字段
                fetch(`/keywords/${keywordId}/`) // 假设有一个API端点来获取单个关键词详情
                     .then(response => response.json())
                     .then(data => {
                         document.getElementById('keyword').value = data.keyword;
                         document.getElementById('description').value = data.description;
                         document.getElementById('manual_text').value = data.manual_text || ''; // 加载手动输入文本，如果为空则设为''
                         document.getElementById('modal-title').textContent = '编辑推送关键词';
                         keywordModal.style.display = 'flex';
                     })
                     .catch(error => console.error('Error fetching keyword details:', error));
            });
        });
        
        // 点击历史按钮
        historyBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const keywordId = this.getAttribute('data-id');
                // 这里应该发送AJAX请求获取历史记录
                // 为了演示，我们假设已经获取到数据
                historyModal.style.display = 'flex';
                document.querySelector('.history-list').innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';
                // 模拟加载历史记录
                setTimeout(() => {
                    document.querySelector('.history-list').innerHTML = `
                        <div class="history-item success">
                            <div class="history-header">
                                <span class="history-status success">成功</span>
                                <span class="history-time">2023-06-15 14:30</span>
                            </div>
                            <div class="history-message">推送成功，已发送到指定邮箱。</div>
                        </div>
                        <div class="history-item failed">
                            <div class="history-header">
                                <span class="history-status failed">失败</span>
                                <span class="history-time">2023-06-08 10:15</span>
                            </div>
                            <div class="history-message">推送失败，无法连接到SMTP服务器。</div>
                        </div>
                    `;
                }, 1000);
            });
        });
        
        // 点击删除按钮
        deleteBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                currentDeleteId = this.getAttribute('data-id');
                deleteModal.style.display = 'flex';
            });
        });
        
        // 确认删除
        deleteBtn.addEventListener('click', function() {
            if (currentDeleteId) {
                // 发送删除请求
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/push_notifications/keywords/${currentDeleteId}/delete/`;
                
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
                
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
            }
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === keywordModal) {
                keywordModal.style.display = 'none';
            }
            if (event.target === historyModal) {
                historyModal.style.display = 'none';
            }
            if (event.target === deleteModal) {
                deleteModal.style.display = 'none';
            }
        });
    });
</script>
{% endblock %}